<template>
  <div class="vehicle">
    <div class="vehicle_top">请选择车辆</div>
    <ul class="v_main">
      <li class="flex">
        <p>类型</p>
        <select v-model="selected">
          <option disabled value="">请选择车辆类型</option>
          <!-- <option>3</option>
          <option>4</option>
          <option>5</option> -->
          <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option>
        </select>
      </li>
      <li class="flex">
        <p>品牌</p>
        <input v-model="brand" placeholder="请填写车的品牌">
      </li>
      <li class="flex">
        <p>车型</p>
        <input v-model="carModel" placeholder="请填写车的车型">
      </li>
      <li class="flex">
        <p>车牌</p>
        <input v-model="plate" placeholder="请填写车牌号">
      </li>
    </ul>
      <div class="vehicle_default flex">
        <p>设为默认车辆</p>
        <div v-bind:class="[isOpen == '1'? 'switch_out_left switch_out' : 'switch_out_right switch_out']">
          <div v-bind:class="[isOpen == '0'? 'left switcher' : 'right switcher']" v-on:click="switcher"></div>
        </div>      
      </div>
    <button class="v_btn" @click="add">保 存</button>
  </div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: "vehicle",
  data () {
    return {
      siteId: '',
      isOpen: '0',
      selected: '',
      options:[],
      brand: '',  //品牌
      carModel: '',  //车型
      plate: '',  //车牌
    }
  },
  beforeMount(){

    this.getCarCatory();
    if (this.$route.params.id != '0') {
      this.selected = this.$route.params.type;
      this.brand = this.$route.params.brand;
      this.carModel = this.$route.params.model;
      this.plate = this.$route.params.plate;      
    }

  },
  mounted(){
    this.$root.share();
  },
  methods: {

    getCarCatory(){

      var that = this;
       
      axios.get(global.api.carMine.CateGory,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){

    
        if(res.data.code == 0){
          
          that.options = res.data.data;
         
        }
        
      })
      .catch(function(res){
        
      })
    },

    switcher(){
      // this.isOpen = !this.isOpen
      var that = this;
      if (that.isOpen == '0') {
        that.isOpen = '1'
      } else {
        that.isOpen = '0'
      }
      console.log(that.isOpen);
    },
    add(){
      var that = this;
      var id = that.$route.params.id;
      var type = that.selected;
      var brand = that.brand;
      var modelsl = that.carModel;
      var num = that.plate;
      var is_default = that.isOpen;
      if (brand == ''|| brand == undefined || brand == null) {
        alert("请填写车的品牌");
      } else if (modelsl == ''|| modelsl == undefined || modelsl == null) {
        alert("请填写车的车型");
      } else if (num == ''|| num == undefined || num == null) {
        alert("请填写车牌号");
      } else if (id == '0' || id == '' || id == undefined || id == null) {
        console.log("没有id");
        axios.get(global.api.carMine.add,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            is_default: is_default,
            car_type: type,
            car_name: brand,
            car_models: modelsl,
            car_num: num,
          }
        })
        .then(function(res){
          console.log("no id then");
          console.log(res);
          // that.list = res.data.data;
          if (res.data.data.code == 'success') {
            // that.$router.push({path:'/vehicle'})
            that.$router.go(-1)
          }else{
            alert(res.data.data.msg)
          }
        })
        .catch(function(res){
          console.log("catch");
          console.log(res);
        })
      } else {
        console.log("有id");
        axios.get(global.api.carMine.add,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            id: id,
            is_default: is_default,
            car_type: type,
            car_num: num,
          }
        })
        .then(function(res){
          console.log("id then");
          console.log(res);
          // that.list = res.data.data;
          if (res.data.data.code == 'success') {
            // that.$router.push({path:'/vehicle'})
            that.$router.go(-1)
          }
        })
        .catch(function(res){
          console.log("catch");
          console.log(res);
        })
      }
    },
  },
}
</script>
  
<style scoped>
  input:focus,select:focus,button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .vehicle{}
  .vehicle_top{
    line-height: 2.3rem;
    text-align: left;
    background-color: #E4E4E6;
    padding-left: 0.5rem;
  }
  .v_main{
    padding: 0rem 0 2rem;
    border-bottom: 1px solid #B3B3B4;
    width: 92%;
    margin: 0 4%;
  }
  .v_main li{
    text-align: left;
    font-size: 0.95rem;
    width: 90%;
    margin: 1.5rem auto 0;
    justify-content: space-between;
    align-items: center;
  }
  .v_main li p{
    width: 2.5rem;
  }
  .v_main li select {
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    padding-left: 10px;
  }
  .v_main li option {

  }
  .v_main li input {
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    padding-left: 10px;
  }
  .vehicle_default{
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #B3B3B4;
    padding: 1rem 0 1rem;
    width: 92%;
    margin: 0 4%;
  }
  /*按钮*/
  .switch_out{
    width: 3rem;
    height: 1.5rem;
    border: 1px solid #2ecc80;
    border-radius: 0.9rem;
    transition: background-color 0.6s;
    position: relative;
  }
  .switch_out_left{
    background-color: #2ecc80;
  }
  .switch_out_right{
    background-color: #fff;
  }
  .switcher {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background-color: #fff;
    transition: left 0.6s;
    position: absolute;
    top: 0;
    box-shadow: 0px 0px 2px 1px #2ecc80;
  }
  .left {
    left: 0;
  }

  .right {
    left: 1.5rem;
  }
  .v_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 3rem 0 1rem;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>
